<template>
  <div class="bigBox">
    <el-container>
      <el-header style="background-color: blueviolet">Header</el-header>
      <el-main>
        <div class="box">
          <div class="box1">
            <el-row>
              <el-col :span="24" style="position: relative; margin-bottom: 15px"
                ><div class="grid-content ep-bg-purple-dark" />
                <el-input
                  v-model="input"
                  placeholder="
  标题关键字"
                  style="width: 214px"
                />
                <div style="position: absolute; right: 0px; top: 0px">
                  <el-button type="primary">查询</el-button>
                  <el-button @click="dialogAdd = true">添加</el-button>
                </div>
              </el-col>
              <el-col :span="24">
                <el-table :data="classList" border style="width: 100%">
                  <el-table-column type="selection" width="55" />
                  <el-table-column
                    prop="className"
                    label="分类名称"
                    width="180"
                    align="center"
                  />
                  <el-table-column
                    prop="classId"
                    label="分类编号"
                    align="center"
                  />
                  <el-table-column
                    prop="classSta"
                    label="状态"
                    align="center"
                  />
                  <el-table-column label="操作" align="center">
                    <template #default="scope">
                      <el-button
                        type="text"
                        size="small"
                        @click="dialogDeal = true"
                        >编辑</el-button
                      >
                      <el-button
                        type="text"
                        size="small"
                        @click="deleteDia = true"
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
              <el-col
                :span="24"
                style="display: flex; justify-content: flex-end"
              >
                <el-pagination
                  small
                  background
                  layout="prev, pager, next"
                  :total="classList.length"
                  class="mt-4"
              /></el-col>
              <!-- 添加 -->
              <el-dialog
                v-model="dialogAdd"
                title="添加"
                width="30%"
                :before-close="handleAdd"
              >
                <div class="addDia">
                  <span>分类名称：</span>
                  <el-input
                    placeholder="输入分类名称"
                    style="width: 70%"
                  ></el-input>
                </div>
                <div class="addDia">
                  <span>分类编码：</span>
                  <el-input
                    placeholder="输入分类编号"
                    style="width: 70%"
                  ></el-input>
                </div>
                <div
                  style="
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  <span>是否启用：</span>
                  <el-radio-group v-model="radio" style="width: 70%">
                    <el-radio :label="3">开启</el-radio>
                    <el-radio :label="6">不开启</el-radio>
                  </el-radio-group>
                </div>
                <template #footer>
                  <span class="dialog-footer">
                    <el-button @click="dialogAdd = false">取消</el-button>
                    <el-button type="primary" @click="dialogAdd = false">
                      保存
                    </el-button>
                  </span>
                </template>
              </el-dialog>
              <!-- 编辑 -->
              <el-dialog
                v-model="dialogDeal"
                title="编辑"
                width="30%"
                :before-close="handleDeal"
              >
                <div class="addDia">
                  <span>分类名称：</span>
                  <el-input
                    placeholder="输入分类名称"
                    style="width: 70%"
                  ></el-input>
                </div>
                <div class="addDia">
                  <span>分类编码：</span>
                  <el-input
                    placeholder="输入分类编号"
                    style="width: 70%"
                  ></el-input>
                </div>
                <div class="addDia">
                  <span>是否启用：</span>
                  <el-radio-group v-model="radio" style="width: 70%">
                    <el-radio :label="3">开启</el-radio>
                    <el-radio :label="6">不开启</el-radio>
                  </el-radio-group>
                </div>
                <template #footer>
                  <span class="dialog-footer">
                    <el-button @click="dialogDeal = false">取消</el-button>
                    <el-button type="primary" @click="dialogDeal = false">
                      保存
                    </el-button>
                  </span>
                </template>
              </el-dialog>
            </el-row>
          </div>
        </div>
      </el-main>
    </el-container>
    <!-- 删除模态框 -->
    <el-dialog
      v-model="deleteDia"
      title="确认提示"
      width="30%"
      :before-close="handleDelete"
    >
      <div style="display: flex">
        <div style="display: flex; align-items: center">
          <img src="../styles/商品图片/正确.png" style="position: relative" />
          <img
            src="../styles/商品图片/勾.png"
            style="position: absolute; left: 29px; top: 120px"
          />
        </div>
        <div style="margin-left: 20px">
          <p style="font-size: 16px; font-weight: 700; color: #666666">
            系统提示
          </p>
          <p style="font-size: 14px; font-weight: 400; color: #999999">
            确定要删除该商品吗？
          </p>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="deleteDia = false">取消</el-button>
          <el-button type="primary" @click="deleteDia = false">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { ElMessageBox } from "element-plus";
//删除
const deleteDia = ref(false);
const handleDelete = (done: () => void) => {
  ElMessageBox.confirm("是否取消操作?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};
//添加
const dialogAdd = ref(false);
const handleAdd = (done: () => void) => {
  ElMessageBox.confirm("是否取消操作?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};
//编辑
const dialogDeal = ref(false);
const handleDeal = (done: () => void) => {
  ElMessageBox.confirm("是否取消操作?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};
const classList = [
  {
    className: "哑铃",
    classId: "123456",
    classSta: "开启",
  },
  {
    className: "哑铃",
    classId: "123456",
    classSta: "开启",
  },
  {
    className: "哑铃",
    classId: "123456",
    classSta: "开启",
  },
  {
    className: "哑铃",
    classId: "123456",
    classSta: "开启",
  },
  {
    className: "哑铃",
    classId: "123456",
    classSta: "开启",
  },
  {
    className: "哑铃",
    classId: "123456",
    classSta: "开启",
  },
  {
    className: "哑铃",
    classId: "123456",
    classSta: "开启",
  },
];
const dialogVisible = ref(false);
const handleClose = (done: () => void) => {
  ElMessageBox.confirm("Are you sure to close this dialog?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};
</script>

<style scoped>
.bigBox {
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
}
.box {
  background-color: #fff;
  padding: 50px, 0px;
  border-radius: 5px;
}
.box1 {
  padding: 15px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.addDia {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
</style>
